<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模块管理</title>
    <link rel="stylesheet" type="text/css" href="/static/easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/static/easyui/demo/demo.css">
    <script type="text/javascript" src="/static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
    <style>
        .ff {
            width: 95%;
            border: 1px solid lightskyblue;
            margin: auto;
            padding: 3px;
            text-align: center;
        }


        .ff table td {
            padding-left: 5px;
            background: white;
            border-left: 1px darkgray;
            border-top: 1px darkgray;
            text-align: left;
        }
    </style>
    <script>

        function onContextMenu(e, row) {
            $("#menu-add .menu-text").text("添加子功能");
            $("#menu-add").show();
            e.preventDefault();
            $(this).treegrid('select', row.id);
            var level = row.level;
            if (level == '2') {
                $("#menu-add").hide();
            }
            if (level == '0') {
                $("#menu-add .menu-text").text("添加一级功能");
            }
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        }
        function append() {
            $("#url").removeAttr("disabled");
            var node = $('#tg').treegrid('getSelected');
            if (node == null) {
                $.messager.alert('提示', '请选择父模块!');
            }
            var level = node.level;
            if (level == 2) {
                $.messager.show({
                    title: '提示',
                    msg: '不支持三级功能的添加'
                });
                return
            } else if (level == 0) {
                $("#url").attr("disabled", "disabled");
            }
            $('#method').val('add');
            $('#parentName').textbox('setValue', node.name);
            $('#seq').val( node.seq);
            $('#parentId').val(node.id);
            $('#dlg').dialog('open');
        }
        function removeIt() {
            var node = $('#tg').treegrid('getSelected');
            if (node == null) {
                $.messager.alert('提示', '请选择要删除的模块!');
                return
            }
            if (node.level == 0) {
                $.messager.alert('提示', '无法删除该项!')
                return
            }
            if ($('#tg').treegrid('getChildren', node.id).length > 0) {
                $.messager.show({
                    title: '提示',
                    msg: '请先删除其下子功能!'
                });
            } else {
                $.ajax({
                    url: '/management/module/remove/' + node.id,
                    method: 'POST',
                    dataType: 'json',
                    success: function (result) {
                        $.messager.show({
                            title: '提示',
                            msg: result.msg
                        });
                        $('#tg').treegrid('reload');
                    },
                    error: function () {
                        $.messager.show({
                            title: '提示',
                            msg: '请求删除失败'
                        });
                    }
                })
            }
        }
        function cancel() {
            $('#dlg').dialog('close');
            $('#parentName').textbox('setValue', '');
            $('#name').val('');
            $('#remark').val('');
            $('#url').val('');
            $('#id').val('');
            $("#url").removeAttr("disabled");

        }
        function save() {
            $('#fm').form('submit', {
                url: '/management/module/addOrEdit',
                dataType: 'json',
                onSubmit: function () {
                    return $("#fm").form('validate');
                },
                success: function (data) {
                    var res = JSON.parse(data);
                    $.messager.show({
                        title: '提示',
                        msg: res.msg
                    });
                    $('#dlg').dialog('close');
                    $('#tg').treegrid('reload');
                }
            });
        }
        function edit() {
            $("#url").removeAttr("disabled");
            $('#method').val('edit');
            var node = $('#tg').treegrid('getSelected');
            if (node == null) {
                $.messager.alert('提示', '请选择要修改的模块!');
                return
            }
            var parent = $('#tg').treegrid('getParent', node.id);
            if (node.level == 0) {
                $.messager.alert('提示', '无法修改该项!')
                return
            } else if (node.level == 1) {
                $("#url").attr("disabled", "disabled");
            }
            $('#id').val(node.id);
            var parentName = parent.name;
            $('#parentName').textbox('setValue', parentName);
            $('#name').val(node.name);
            $('#remark').val(node.remark);
            $('#url').val(node.url);
            $('#seq').val( node.seq);
            $('#dlg').dialog('open');
        }
    </script>
</head>
<body class="easyui-layout">
<div id="center" data-options="region:'north'" style="border:0 solid black !important;">
    <div class="easyui-container" style="background: lightgray">
        <a id="btn" href="#" class="easyui-linkbutton" onclick="append()" data-options="iconCls:'icon-add',plain:true">添加</a>
        <a id="btn" href="#" class="easyui-linkbutton" onclick="edit()"
           data-options="iconCls:'icon-edit',plain:true">编辑</a>
        <a id="btn" href="#" class="easyui-linkbutton" onclick="removeIt()"
           data-options="iconCls:'icon-remove',plain:true">删除</a>
    </div>
</div>
<div id="center" data-options="region:'center'" style="border:0 solid black !important;">
    <table id="tg" class="easyui-treegrid" style="height: 100%;width: 100%;"
           data-options="animate:true,url:'/management/module/treeGrid',idField:'id',treeField:'name',
           rownumbers:true,fitColumns:true,lines: true,
           onContextMenu: onContextMenu">
        <thead>
        <tr>
            <th data-options="field:'name',width:200,align:'left'">模块名称</th>
            <th data-options="field:'remark',width:400,align:'center'">备注</th>
            <th data-options="field:'level',width:400,align:'center'">模块层级</th>
            <th data-options="field:'url',width:300,align:'center'">模块链接</th>
            <th data-options="field:'seq',width:300,align:'center'">排序</th>
        </tr>
        </thead>
    </table>
</div>
<div id="mm" class="easyui-menu" style="width:120px;" data-options="hideOnUnhover:false">
    <div id="menu-add" onclick="append()" data-options="iconCls:'icon-add'">添加子模块</div>
    <div onclick="removeIt()" data-options="iconCls:'icon-remove'">删除</div>
    <div class="menu-sep"></div>
    <div onclick="edit()" data-options="iconCls:'icon-edit'">编辑</div>
</div>
<!--编辑模块-->
<div id="dlg" class="easyui-dialog" title="编辑模块"
     data-options="iconCls:'icon-edit',modal:true,closed:true,buttons:'#bts',width:330">
    <form id="fm" class="ff" method="post">
        <input id="method" name="method" type="hidden"/>
        <input id="parentId" name="parentId" type="hidden"/>
        <input id="id" name="id" type="hidden"/>
        <table style="width: 100%;height: 100%;background: #ffffff"
               align="center" cellpadding="1"
               cellspacing="2">
            <tr>
                <th style="text-align: center;background:#B3DFDA ">
                    所属父模块:</th>
                <td>
                    <input id="parentName" class="easyui-textbox" type="text" data-options="disabled:true"/>
                </td>
            </tr>
            <tr>
                <th style="text-align: center;background:#B3DFDA ">
                    模块名称:</th>
                <td>
                    <input id="name" class="easyui-validatebox" type="text" name="name" data-options="missingMessage:'必须输入模块名称',invalidMessage:'必须输入模块名称',required:true"/>
                </td>
            </tr>
            <tr>
                <th style="text-align: center;background:#B3DFDA ">
                    链接地址:</th>
                <td>
                    <input id="url" class="easyui-validatebox" type="text" name="url" data-options="missingMessage:'必须输入模块名称',invalidMessage:'必须输入模块名称'"/>
                </td>
            </tr>
            <tr>
                <th style="text-align: center;background:#B3DFDA ">
                    排序:</th>
                <td>
                    <input id="seq" class="easyui-validatebox" type="text" name="seq" data-options="validType:'digits',missingMessage:'请输入模块序号',invalidMessage:'请输入模块序号'"/>
                </td>
            </tr>
            <tr>
                <th style="text-align: center;background:#B3DFDA ">
                    备注:</th>
                <td>
                    <input id="remark" data-options="multiline:true" class="easyui-textbox" type="text" name="remark" style="height: 60px"/>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="bts">
    <a href="#" class="easyui-linkbutton" onclick="save()" data-options="iconCls:'icon-save'">保存</a>
    <a href="#" class="easyui-linkbutton" onclick="cancel()" data-options="iconCls:'icon-cancel'">取消</a>
</div>
</body>
</html>